<template>
    <div class="table-wrapper">
      <div
        :style="{
          'max-height': !isShowPagination ? '100%' : 'calc(100% - 48px)',
          height: height
        }"
        :class="{ flex1: isFlex1 }"
      >
        <el-table
          ref="tableRef"
          :data="data"
          :border="border"
          stripe
          style="width: 100%; height: 100%"
          show-overflow-tooltip
          tooltip-effect="light over-tooltip-width"
          @sort-change="onSortChange"
          :row-key="rowKey"
          :default-expand-all="defaultExpandAll"
          @selection-change="handleSelectionChange"
          :span-method="onSpanMethod"
        >
          <el-table-column v-if="isShowSelection" type="selection" width="55" />
          <el-table-column align="left" label="序号" width="80">
            <template #default="scope">
              <span>{{ scope.row.index || scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <!-- <template #empty>
            <el-empty description="暂无数据" :image-size="176" :image="emptyImg"></el-empty>
          </template> -->
          <slot></slot>
        </el-table>
      </div>
  
      <pagination
        v-if="isShowPagination"
        :total="total"
        v-model:page="currentPage"
        v-model:limit="pageSize"
        @pagination="changeData"
      />
    </div>
  </template>
  
  <script setup>
  import Pagination from '@renderer/components/Pagination/index.vue'
  
  // import emptyImg from '@/assets/images/command/empty.png'
  const tableRef = ref(null)
  const emit = defineEmits([
    'update:page',
    'update:limit',
    'pagination',
    'sortChange',
    'selectionChange',
    'spanMethod'
  ])
  const props = defineProps({
    data: Object,
    // 总页数
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    page: {
      type: Number,
      default: 1
    },
    // 每页条数
    limit: {
      type: Number,
      default: 20
    },
    // 每页表示，用来全选
    rowKey: {
      type: String,
      default: ''
    },
    // 是否展开所有的列表
    defaultExpandAll: {
      type: Boolean,
      default: true
    },
    // 是否显示分页组件
    isShowPagination: {
      type: Boolean,
      default: true
    },
    // 是否显示分页组件
    height: {
      type: String,
      default: ''
    },
    isFlex1: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    isShowSelection: {
      type: Boolean,
      default: false
    }
  })
  
  const currentPage = computed({
    get() {
      return props.page
    },
    set(val) {
      emit('update:page', val)
    }
  })
  const pageSize = computed({
    get() {
      return props.limit
    },
    set(val) {
      emit('update:limit', val)
    }
  })
  watch(
    () => props.page,
    (newValue, oldValue) => {
      currentPage.value = newValue
    }
  )
  watch(
    () => props.size,
    (newValue, oldValue) => {
      size.value = newValue
    }
  )
  // 分页组件回调
  function changeData() {
    emit('pagination')
  }
  // 用来排序
  const onSortChange = (column) => {
    emit('sortChange', column)
  }
  // 多选事件
  const handleSelectionChange = (val) => {
    emit('selectionChange', val)
  }
  // 合并行或列
  const onSpanMethod = (val) => {
    emit('spanMethod', val)
  }
  // 表格对象回调出去
  defineExpose({ getTableRef: () => tableRef.value })
  </script>
  
  <style lang="scss" scoped>
  .table-wrapper {
    width: 100%;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  </style>
  